<template>
  <div class="app-container">
    <el-dialog :title="prop.title" :visible.sync="prop.open" width="480px" :close-on-click-modal="true" :show-close="true"
      destroy-on-close append-to-body>
      <div class="detail-panel-item">
        <ul v-if="fileList&&fileList.length>0"  class="file-list">
          <li v-for="(item,index) in fileList" :key="index">
            <div class="file-item">
              
              <span style="color: #000000;"><i class="el-icon-document"></i>{{item.fileOriginalName}}</span>
              <div style="height: 20px;"><el-button type="text" @click="downloadFile(item)">下载</el-button></div>
            </div>
          </li>
        </ul>
        <div v-else class="detail-empty-data">暂无数据</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {download} from '@/api/file/file.js';
import {getFileList} from '@/api/file/file.js';
export default {
  name: "DownloadFile",
  dicts: [],
  components: {  },
  props:{
    prop:{
      type:Object,
      default:function(){
        return {
          open:false,
          title:'下载附件',
          id:null,
          typeId:null,
        }
      }
    }
  },
  data() {
    return {
      fileList:[],
    };
  },
  methods: {
    getFileList(){
      getFileList({bussinessId:this.prop.id,typeId:this.prop.typeId}).then(res =>{
        this.fileList = res.data
      })
    },
    downloadFile(row){
      let params = {fileId:row.fileId}
      download(params)
    },
    
  },
  mounted() {
    console.log('this.prop',this.prop)
    this.getFileList()
  }
};
</script>
<style scoped>
.file-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.file-item{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.file-list li{
  font-size: 16px;
  padding: 10px;
}
i{
  padding: 0 5px;
}
</style>
